<template>
  <view class="send-new-container">
    <!-- 顶部导航栏 -->
    <view class="custom-nav-bar" :style="{ height: navBarHeight + 'px' }">
      <!-- 状态栏占位 -->
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 导航栏内容 -->
      <view class="nav-content" :style="{ height: navBarContentHeight + 'px' }">
        <!-- 返回按钮 -->
        <view class="nav-left" @click="goBack">
          <text class="nav-back">← 返回</text>
        </view>
        <!-- 标题 -->
        <text class="nav-title">发送新消息</text>
        <!-- 右侧占位 -->
        <view class="nav-right"></view>
      </view>
    </view>

    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 标题输入 -->
      <view class="input-section">
        <text class="input-label">消息标题</text>
        <input class="title-input" v-model="messageTitle" placeholder="请输入消息标题" />
      </view>
      <!-- 内容输入 -->
      <view class="input-section">
        <text class="input-label">消息内容</text>
        <input class="cotent-input" v-model="messageContent" placeholder="请输入消息标题" />
      </view>
    </view>

    <!-- 发送按钮区域 -->
    <view class="send-section">
      <button class="send-btn" @click="sendMessage" :disabled="sending">
        发送消息
      </button>
    </view>
  </view>
</template>

<script>
  import {
    sendToCom
  } from '../../apis/apis.js'

  export default {
    data() {
      return {
        // 导航栏高度
        statusBarHeight: 0,
        navBarContentHeight: 44,
        navBarHeight: 0,

        messageTitle: '',
        messageContnet: '',
        deviceNo: '',

        sending: false
      }
    },

    onLoad() {
      // 计算导航栏高度
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || systemInfo.safeAreaInsets?.top || 20
      this.navBarHeight = this.statusBarHeight + this.navBarContentHeight
    },

    onShow() {
      this.deviceNo = uni.getStorageSync('deviceNo')
    },

    methods: {
      goBack() {
        uni.navigateBack()
      },

      // 发送消息
      async sendMessage() {
        if (this.sending) return
        // 点击发送时读取编辑器内容并做非空校验
        const titleOk = this.messageTitle.trim().length > 0
        const contentOk = this.messageContent.trim().length > 0
        if (!titleOk || !contentOk) {
          uni.showToast({
            title: '请输入标题和内容',
            icon: 'none'
          })
          return
        }

        this.sending = true

        try {
          // TODO: 这里将来需要添加实际的发送API调用
          const res = await sendToCom({
            equipments: [{
              eqCode: "1",
              remark: ""
            }],
            remark: this.deviceNo,
            type: '消息',
            title: this.messageTitle,
            content: this.messageContent,
            extJson: "",
            status: ""
          })
          console.log('发送消息', {
            title: this.messageTitle,
            content: this.messageContent,
          })

          uni.showToast({
            title: '发送成功',
            icon: 'success',
            duration: 2000
          })

          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } catch (error) {
          console.error('发送失败:', error)
          uni.showToast({
            title: '发送失败',
            icon: 'error'
          })
        } finally {
          this.sending = false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .send-new-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
  }

  /* 自定义导航栏 */
  .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #007AFF;
    z-index: 999;
  }

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    color: #fff;
  }

  .nav-left {
    display: flex;
    align-items: center;
  }

  .nav-back {
    font-size: 32rpx;
    color: #fff;
  }

  .nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
  }

  .nav-right {
    width: 120rpx;
  }

  /* 页面内容 */
  .page-content {
    flex: 1;
    padding: 60rpx 30rpx;
    padding-bottom: 120rpx;
    margin-top: 50rpx;
    /* 为发送按钮留出空间 */
  }

  /* 输入区域 */
  .input-section {
    margin-bottom: 20rpx;
  }

  .input-label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    font-weight: 600;
  }

  .title-input {
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 0 24rpx;
    font-size: 30rpx;
    border: 2rpx solid #eee;
    box-sizing: border-box;

    &:focus {
      border-color: #007AFF;
    }
  }

  .cotent-input {
    width: 100%;
    height: 480rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 0 24rpx;
    font-size: 30rpx;
    border: 2rpx solid #eee;
    box-sizing: border-box;

    &:focus {
      border-color: #007AFF;
    }
  }
</style>